<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
    <meta charset="utf-8">
    <title>添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        .layui-form-item .layui-input-company {
            width: auto;
            padding-right: 10px;
            line-height: 38px;
        }

        .layui-form-item .layui-inline {
            width: 450px !important;
        }

        .layui-form-item .layui-input-inline {
            width: 300px !important;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div id="main"></div>
    </div>
</div>


<script id="template" type="text/html">
    <div class="layui-inline">
        <label class="layui-form-label">{{ d.label }}</label>
        <div class="layui-input-inline" style="height: 38px;">
            <select name="{{d.name}}" lay-verify="required">
                {{# layui.each(d.list, function(index, item){ }}
                <option value="{{item.id}}">{{ item.name }}</option>
                {{# }); }}
            </select>
        </div>
    </div>
</script>

<script id="stationTemplate" type="text/html">
    <div class="layui-inline">
        <label class="layui-form-label">{{ d.label }}</label>
        <div class="layui-input-inline" style="height: 38px;">
            <select name="{{d.name}}" lay-filter="stationSelect" lay-verify="required">
                {{# layui.each(d.list, function(index, item){ }}
                <option value="{{item.id}}">{{ item.name }}</option>
                {{# }); }}
            </select>
        </div>
    </div>
</script>

<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script th:inline="javascript">
    layui.use(['form', 'layer', 'laytpl'], function () {
        let form = layui.form
            , $ = layui.$
            , laytpl = layui.laytpl
            , layer = layui.layer;

        /**
         * 封装一个select选择器: selectTemplate(api,name,label,templateId,viewId){};
         * 参数 :
         * 请求地址: url,
         * 索引: id
         * select的name属性: name,
         * label名字: label
         * 模板id: templateId
         * 视图容器id: viewId
         */
        function selectTemplate(url, id, name, label, templateId, viewId) {
            $.post(url,{
                "id": id
            }, function (res) {
                console.log(res);
                let list = {"name": name,"label": label,"list": [{"value": '', "name": "请选择"}]};
                if (res.data != null){
                    list = {"name": name,"label": label,"list": res.data};
                }
                let getTpl = document.getElementById('' + templateId + '').innerHTML;
                let view = document.getElementById('' + viewId + '');
                view.innerHTML = null;
                laytpl(getTpl).render(list, function (html) {
                    view.innerHTML = html;
                });
                form.render('select');
            });
        }

        /**
         * 封装一个select选择器: selectTemplate(list,name,label,templateId,viewId){};
         * 参数 :
         * 数据: api,
         * select的name属性: name,
         * label名字: label
         * 模板id: templateId
         * 视图容器id: viewId
         */
        function selectTemplateList(list, name, label, templateId, viewId) {
            list = {"name": name,"label": label,"list": list};
            let getTpl = document.getElementById('' + templateId + '').innerHTML;
            let view = document.getElementById('' + viewId + '');
            view.innerHTML = null;
            laytpl(getTpl).render(list, function (html) {
                view.innerHTML = html;
            });
            form.render('select');
        }

        //监听下拉选择框
        form.on('select(stationSelect)', function (data) {
            selectTemplate("/cabinet/getCabinet", data.value, "cabinetid", "选择柜子", "template", "cabinetView");
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            console.log(data.field);
            $.ajax({
                url:data.field.addType,
                type:`post`,
                dataType:`json`,
                data: data.field,
                success:function (res) {
                    console.log(res);
                    if (res.code){
                        layer.msg('添加成功');
                        //提交成功关闭窗口
                        layer.close(layer.index);
                        window.parent.location.reload();
                    }else{
                        layer.msg('添加失败');
                    }
                }
            });
            return false;
        });

        window.back = function () {
            let iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);
        };

        $(document).ready(function () {
            loading();
        });

        function loading() {
            let type = getUrlParam("type");
            console.log(type);
            let station = [[${station}]];
            let cabinet = [[${cabinet}]];
            let chest = [[${chest}]];
            let ht = '<p>出错了</p>\n';
            if (type === "station") {
                ht = '<form class="layui-form layuimini-form" id="stationForm">\n' +
                    '            <div class="layui-form-item" >\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label required">派出所名称</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="hidden" name="addType" value="/station/addStation" > \n' +
                    '                        <input type="text" id="name" name="name" lay-verify="required" value="" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item" >\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label required">单位编号</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" id="serial" name="serial" lay-verify="required"\n' +
                    '                               value="" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item" >\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label required">地址</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" id="address" name="address" lay-verify="required" value="" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item" >\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label required">负责人</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" id="principal" name="principal" lay-verify="required" value="" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item" >\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label required">联系电话</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" id="telnum" name="telnum" lay-verify="required"\n' +
                    '                               value="" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item" >\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label required">状态</label>\n' +
                    '                    <div class="layui-input-inline" >\n' +
                    '                        <input type="checkbox" name="status" checked value="1" lay-skin="switch" lay-text="启用|舍弃" />\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <div class="layui-input-block">\n' +
                    '                    <button class="layui-btn" lay-submit lay-filter="saveBtn">保存</button>\n' +
                    '                    <button type="button" class="layui-btn layui-btn-primary l" onclick="back()">取消</button>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '        </form>';
                $("#main").html(ht);
                if(station !=null){
                    $("#name").val(station.name);
                    if(station.serial!=null)
                        $("#serial").attr({"readonly":"readonly"});
                    $("#serial").val(station.serial);
                    $("#address").val(station.address);
                    $("#principal").val(station.principal);
                    $("#telnum").val(station.telnum);
                }
            } else if (type === "cabinet") {
                ht = '<form class="layui-form layuimini-form" id="cabinetForm" >\n' +
                    '        <div class="layui-form-item" >\n' +
                    '            <div id="stationView"></div>\n' +
                    '        </div>\n' +
                    '            <div class="layui-form-item" >\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label required">柜子名称</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="hidden" name="addType" value="/cabinet/addCabinet" > \n' +
                    '                        <input type="text" id="name" name="name" lay-verify="required" value="" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item" >\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label required">柜子编号</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" id="serial" name="serial" lay-verify="required"\n' +
                    '                               value="" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item" >\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label required">状态</label>\n' +
                    '                    <div class="layui-input-inline" >\n' +
                    '                        <input type="checkbox" name="status" checked value="1" lay-skin="switch" lay-text="启用|舍弃" />\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <div class="layui-input-block">\n' +
                    '                    <button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>\n' +
                    '                    <button type="button" class="layui-btn layui-btn-primary l" onclick="back()">取消</button>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '        </form>';
                $("#main").html(ht);
                selectTemplateList(station, "stationid", "派出所", "template", "stationView");
                if(cabinet !=null){
                    $("#name").val(cabinet.name);
                    if(cabinet.serial!=null)
                        $("#serial").attr({"readonly":"readonly"});
                    $("#serial").val(cabinet.serial);
                }
            } else if (type == "chest") {
                ht = '<form class="layui-form layuimini-form" id="chestForm">\n' +
                    '            <div class="layui-form-item" >\n' +
                    '                <div id="stationView2"></div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item" >\n' +
                    '                <div id="cabinetView"></div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item" >\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label required">箱子名称</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="hidden" name="addType" value="/chest/addChest" > \n' +
                    '                        <input type="text" id="name" name="name" lay-verify="required" value="" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item" >\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label required">箱子编号</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" id="serial" name="serial" lay-verify="required"\n' +
                    '                               value="" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item" >\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label required">最大卷宗数</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" id="intakemax" name="intakemax" lay-verify="required" value="" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item" >\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label required">状态</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="checkbox" id="status" name="status" checked value="1" lay-skin="switch" lay-text="启用|舍弃" />\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <div class="layui-input-block">\n' +
                    '                    <button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>\n' +
                    '                    <button type="button" class="layui-btn layui-btn-primary l" onclick="back()">取消</button>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '        </form>';
                $("#main").html(ht);
                selectTemplateList(station, "stationid", "派出所", "stationTemplate", "stationView2");
                selectTemplateList(cabinet, "cabinetid", "档案柜", "template", "cabinetView");

                if (chest!=null){
                    $("#name").val(chest.name);
                    if(chest.serial!=null)
                        $("#serial").attr({"readonly":"readonly"});
                    $("#serial").val(chest.serial);
                    $("#intakemax").val(chest.intakemax);
                }
            }
            layui.form.render();
        }

        //拿到链接中的参数
        function getUrlParam(name) {
            //正则表达式过滤
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            let r = window.location.search.substr(1).match(reg);
            //获取r数组中下标为2的值；（下标从0开始），用decodeURI（）进行解码
            if (r != null) return decodeURI(r[2]);
            return null;
        }
    });
</script>
</body>
</html>